<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #btn{
            background: red;
            height: 300px;
            width: 300px;
        }
    </style>
</head>

<body>
    <div id="btn"></div>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script language="javascript">
        $(function () {
            wx.config({
                debug: false,
                appId: '${wxconfig.appID}',
                timestamp: '${wxconfig.timestamp}',
                nonceStr: '${wxconfig.nonce}',
                signature: '${wxconfig.signature}',
                jsApiList: [
                    'chooseImage',
                    'uploadImage',
                    'downloadImage'
                ]
            });
            var images = {
                localId: [],
                serverId: []
            };
            $("#btn").click(function () {
                var formObj = $(this).parents(".frmComment");
                $('.serverId', formObj).val("");
                wx.ready(function () {
                    //拍照或从手机相册中选图接口
                    wx.chooseImage({
                        count: 5, // 最多能选择多少张图片，默认9
                        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                        success: function (res) {
                            var localId = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片    
                            var localIdImg = localId.toString().split(",");
                            //上传图片接口                            

                            if (localIdImg.length == 0) {
                                return;
                            }
                            var i = 0, length = images.localId.length;
                            images.serverId = [];
                            function upload() {
                                wx.uploadImage({
                                    localId: localId[i],
                                    success: function (res) {
                                        $("#content-${popid} #imgdiv").append("<img  src=\"" + localIdImg[i] + "\" />");
                                        i++;
                                        images.serverId.push(res.serverId);
                                        var tmpServerId = $('.serverId', formObj).val();
                                        $('.serverId', formObj).val(tmpServerId + res.serverId + ",");
                                        if (i < localIdImg.length) {
                                            upload();
                                        }
                                        if (localIdImg.length > 3) {
                                            $("#content-${popid} #imgdiv").height("200px");
                                        }
                                        $("#content-${popid} #imgdiv").show();
                                        $("#content-${popid} .stBtn").hide();
                                        $("#content-${popid} .saveBt a").hide();
                                        $("#content-${popid} .stBtn").show();
                                        $("#content-${popid} .saveBt a").show();
                                    },

                                    fail: function (res) {
                                        alert(JSON.stringify(res));
                                    }
                                });
                            }
                            upload();

                        }
                    });

                });
            });
        })
    </script>
</body>

</html>